<template>
    <el-dialog
      title="房间人员设定"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
         <!-- 房间人员加入弹窗 -->
        <add-room-jon v-if="addroomjonVisible" ref="addroomjoin" @refreshDataList="getroompepole"></add-room-jon>
        
        <div class="buttonselect" v-if="isauth('room_person_edit')">
            <el-button type="primary" @click="joinpeople" size="mini">加入人员</el-button>
            <el-button type="primary" @click="removepeople" size="mini">移除人员</el-button>
        </div>
        <el-table
         :data="tableData"
         :stripe="true"
         border
         height="300"
         @selection-change="handleSelectionChange"
         :header-cell-style="headFirst"
         style="width: 100%">
         <el-table-column
            type="selection"
            width="55">
         </el-table-column>
         <el-table-column
           prop="userNumber"
           label="人员编号"
          >
         </el-table-column>
         <el-table-column
           prop="userName"
           label="姓名"
          >
         </el-table-column>
         <el-table-column
           prop="userSex"
           label="性别">
          <template slot-scope="scope">
              <div>{{scope.row.userSex | filtersex}}</div>
          </template>
         </el-table-column>
         <el-table-column
           prop="departmentName"
           label="部门">
         </el-table-column>
         <el-table-column
           prop="cardNumber"
           label="卡号">
         </el-table-column>
        </el-table>
    </el-dialog>
</template>
<script>
import AddRoomJon from './room-personnel-add-join'

export default {
   data() {
       return {
         dialogVisible:false,
         addroomjonVisible:false,
         roomName:'',
         roomGuid:'',
         tableData:[],
         selectarr:[],
         layers:''   
       }
   },
   components: {
       AddRoomJon
   },
   filters:{
     filtersex:function(userSex){
       if(userSex!=null){
          if(userSex==0){
              userSex = '男'
          }else{
              userSex = '女'
          }
          return userSex
       }
     }
   },
   methods: {
       handleClose(done){
           done()
       },
       addinit(val){
        this.roomName=val.roomName
        this.roomGuid=val.roomGuid
        this.layers=val.layers
        this.getroompepole()
        this.dialogVisible=true
       },
       joinpeople(){
          // alert('12451')
          this.addroomjonVisible=true
          this.$nextTick(() => {
              this.$refs.addroomjoin.addinit(this.roomGuid)
          })
       },
       //移除人员
       removepeople(){
          if(this.selectarr.length<1){
                this.$message({
                    message: '请选择人员',
                    type: 'warning'
                });
                return
          }
          this.$confirm('此操作将移除该人员, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
          }).then(() => {
            this.deletconfirm()  
            // this.$message({
            //   type: 'success',
            //   message: '移除除成功!'
            // });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消移除'
            });          
          });
       },
      //确认删除
      deletconfirm(){
         this.$http({
                url: this.$http.adornUrl("/area/room/unbind-room-user"),
                method: "post",
                data: this.$http.adornData({
                    messageContent:{
                        roomGuid:this.roomGuid,
                        userGuidList:this.selectarr
                    },
                    messageType: 0
                })
            }).then(({ data }) => {
                this.addDialogFormVisible=false
                if (data.messageCode == 200) {
                    this.$message({
                        message: '解除人员绑定成功',
                        type: 'success'
                     });
                    this.getroompepole()
                }else{
                    this.$message.error(data.errorMessage)
                }
          });
      },
     //获取房间人员信息
      getroompepole(){
        this.$http({
         url: this.$http.adornUrl("/api/v1/Student/room-guid-user"),
         method: "post",
         data: this.$http.adornData({
           messageContent:this.roomGuid,
           messageType: 0
         })
         }).then(({ data }) => {
           if(data.messageCode==200){
             console.log(data)
             this.tableData=data.messageContent
             this.$emit('refreshDataListpage',this.layers)
           }else{
             this.$message.error(data.errorMessage);
           }
         });
      },
      //选择
      handleSelectionChange(val){
        this.selectarr=[]
        for(var i=0;i<val.length;i++){
          this.selectarr.push(val[i].userGuid)
        }
        console.log(this.selectarr)
        
      }   
   }, 
}
</script>

<style lang="scss" scoped>
.buttonselect{
    margin-bottom:10px;
}
</style>